<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :force-fit="true" :height="height" :data="dataSource" :scale="scaleChanged">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-line position="time*count" color="name" />
      <v-point position="time*count" color="name" :size="4" :v-style="style" :shape="'circle'" />
    </v-chart>
  </div>
</template>

<script>

    export default {
        name:'Areachart',
        data() {
            return {
                scale:[{dataKey:'time',min:'2021-01-01',max:'2022-01-01'}],
                height: 400,
                style: { stroke: '#fff', lineWidth: 1 },
            };
        },
        props:{
            dataSource:Array,
            params:Object,
            title:String
        },
        computed: {
            scaleChanged:function () {
                if(this.params.startTime!=''&&this.params.endTime!=''){
                    return [{dataKey:'time',min:this.params.startTime,max:this.params.endTime}];
                }else{
                    return  this.scale;
                }
            },
            data() {
                const DataSet = require('@antv/data-set');

                const sourceData = [
                    { "name": "王五", "count": 1, "time": "2021-05-06" },
                    { "name": "王五", "count": 1, "time": "2021-05-03" },
                    { "name": "李四", "count": 1, "time": "2021-05-06" },
                    { "name": "张三", "count": 1, "time": "2021-05-09" }
                ]

                const dv = new DataSet.View().source(sourceData);
                dv.transform({
                    type: 'fold',
                    fields:this.fields,
                    key: 'name',
                    value: 'count',
                });
                const data = dv.rows;

                const scale = this.scale
                return rows
            }
        },

    };
</script>
